<template>
    <div>
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  <el-breadcrumb-item>角色列表</el-breadcrumb-item>
</el-breadcrumb><br/><br/>
<el-card class="box-card">
   <el-form :inline='true'>
  <el-form-item style='float:left'>
    <el-input v-model="page.query">
       <el-button slot='append' icon="el-icon-search" @click="Goods"></el-button>
    </el-input>
  </el-form-item>
  <el-form-item style='float:left'>
    <el-button type='primary'>添加用户</el-button>
  </el-form-item>
</el-form>
<el-table
    :data="user"
    border
    style="width: 100%">
    <el-table-column
      type='index'
      label="#"
      width="150">
    </el-table-column>
    <el-table-column
      prop="goods_name"
      label="商品名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="goods_price"
      label="商品价格(元)"
      width="150">
    </el-table-column>
    <el-table-column
      prop="goods_weight"
      label="商品重量"
      width="150">
    </el-table-column>
    <el-table-column
      
      label="创建时间"
      width="150">
      <template slot-scope='scope'>
         <span>{{scope.row.add_time | fdate}}</span>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作">
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit">编辑</el-button>
        <el-button type="danger" @click='del(scope.row.goods_id)' icon="el-icon-delete">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<el-pagination
      @size-change="changeSize"
      @current-change="changePage"
      :current-page="page.pagenum"
      :page-sizes="[1,3, 5, 10, 20 ,30]"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count">
    </el-pagination>
</el-card>
    </div>
</template>
<script>
import { Goods,delGoods } from "../api/api.js";
export default {
  data() {
    return {
      keyword: "",
      user: [],
      page:{
      query: "",
      pagenum: 1,
      pagesize: 5
      },
      count:0,
      id:0,
    };
  },
  mounted() {
    this.Goods();
  },
  methods: {
    async Goods() {
      //   1.搜索关键字2.页数3.条数
      let res = await Goods(this.page);
      console.log(res);
      this.user=res.data.goods;
      this.count=res.data.total;
    },
    del(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示',).then(async () => {
        let res=await delGoods(id)
         console.log(res)
         if(res.meta.status==200){
             this.$message.success(res.meta.msg)
             this.Goods()
         }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    changeSize(pagesize){
        this.page.pagesize=pagesize;
         this.Goods()
    },
    changePage(pagenum){
        this.page.pagenum=pagenum;
         this.Goods()
    }
  }
};
</script>

<style lang='scss' scoped >
</style>
